<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>项目详情</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.15.4/css/all.min.css">
    <style>
        .form-section {
            background-color: #f9f9f9;
            border-radius: 5px;
            padding: 20px;
            margin-bottom: 20px;
        }
        .section-title {
            border-bottom: 1px solid #dee2e6;
            padding-bottom: 10px;
            margin-bottom: 20px;
            font-weight: 600;
        }
        .form-group label {
            font-weight: 500;
        }
        .btn-toolbar {
            margin-top: 30px;
        }
        @media print {
            .no-print {
                display: none !important;
            }
            .print-only {
                display: block !important;
            }
            body {
                padding: 0;
                margin: 0;
            }
            .container-fluid {
                width: 100%;
                padding: 0;
            }
            .form-section {
                border: none !important;
                padding: 10px 0 !important;
                margin-bottom: 10px !important;
            }
            .form-control:disabled, .form-control[readonly] {
                background-color: transparent !important;
                border: none !important;
                padding-left: 0 !important;
            }
            label {
                margin-bottom: 0.2rem !important;
            }
        }
    </style>
</head>
<body>
    <div class="container-fluid mt-3">
        <div class="row">
            <div class="col-12">
                <div class="card">
                    <div class="card-header d-flex justify-content-between align-items-center no-print">
                        <h5 id="pageTitle" class="mb-0">项目详情</h5>
                        <div id="viewModeButtons">
                            <button class="btn btn-outline-secondary btn-sm mr-2" id="backBtn">
                                <i class="fas fa-arrow-left mr-1"></i>返回
                            </button>
                            <button class="btn btn-info btn-sm" id="printBtn">
                                <i class="fas fa-print mr-1"></i>打印
                            </button>
                        </div>
                        <div id="editModeButtons" style="display:none;">
                            <button class="btn btn-outline-secondary btn-sm mr-2" id="cancelBtn">
                                <i class="fas fa-times mr-1"></i>取消
                            </button>
                            <button class="btn btn-primary btn-sm" id="saveBtn">
                                <i class="fas fa-save mr-1"></i>保存
                            </button>
                        </div>
                    </div>
                    <div class="card-body">
                        <form id="projectForm">
                            <div class="form-section">
                                <h6 class="section-title">基本信息</h6>
                                <div class="row">
                                    <div class="col-md-4">
                                        <div class="form-group">
                                            <label for="projectName">项目名称</label>
                                            <input type="text" class="form-control" id="projectName" name="projectName">
                                        </div>
                                    </div>
                                    <div class="col-md-4">
                                        <div class="form-group">
                                            <label for="projectId">项目编号</label>
                                            <input type="text" class="form-control" id="projectId" name="projectId" readonly>
                                        </div>
                                    </div>
                                    <div class="col-md-4">
                                        <div class="form-group">
                                            <label for="department">建设部门</label>
                                            <select class="form-control" id="department" name="department">
                                                <option value="信息技术部">信息技术部</option>
                                                <option value="运营部">运营部</option>
                                                <option value="财务部">财务部</option>
                                                <option value="人力资源部">人力资源部</option>
                                                <option value="安全部">安全部</option>
                                            </select>
                                        </div>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-md-4">
                                        <div class="form-group">
                                            <label for="status">项目状态</label>
                                            <select class="form-control" id="status" name="status">
                                                <option value="申报中">申报中</option>
                                                <option value="已申报">已申报</option>
                                                <option value="在建项目">在建项目</option>
                                                <option value="已结项">已结项</option>
                                            </select>
                                        </div>
                                    </div>
                                    <div class="col-md-4">
                                        <div class="form-group">
                                            <label for="manager">项目负责人</label>
                                            <input type="text" class="form-control" id="manager" name="manager">
                                        </div>
                                    </div>
                                    <div class="col-md-4">
                                        <div class="form-group">
                                            <label for="createTime">创建时间</label>
                                            <input type="date" class="form-control" id="createTime" name="createTime">
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="form-section">
                                <h6 class="section-title">预算信息</h6>
                                <div class="row">
                                    <div class="col-md-4">
                                        <div class="form-group">
                                            <label for="budget">项目预算(万元)</label>
                                            <input type="number" step="0.01" class="form-control" id="budget" name="budget">
                                        </div>
                                    </div>
                                    <div class="col-md-4">
                                        <div class="form-group">
                                            <label for="bidPrice">中标价(万元)</label>
                                            <input type="number" step="0.01" class="form-control" id="bidPrice" name="bidPrice">
                                        </div>
                                    </div>
                                    <div class="col-md-4">
                                        <div class="form-group">
                                            <label for="bidTime">中标时间</label>
                                            <input type="date" class="form-control" id="bidTime" name="bidTime">
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="form-section">
                                <h6 class="section-title">项目详情</h6>
                                <div class="row">
                                    <div class="col-md-12">
                                        <div class="form-group">
                                            <label for="description">项目描述</label>
                                            <textarea class="form-control" id="description" name="description" rows="3"></textarea>
                                        </div>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label for="startTime">计划开始时间</label>
                                            <input type="date" class="form-control" id="startTime" name="startTime">
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label for="endTime">计划结束时间</label>
                                            <input type="date" class="form-control" id="endTime" name="endTime">
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="form-section">
                                <h6 class="section-title">其他信息</h6>
                                <div class="row">
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label for="vendor">供应商</label>
                                            <input type="text" class="form-control" id="vendor" name="vendor">
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label for="contact">联系人</label>
                                            <input type="text" class="form-control" id="contact" name="contact">
                                        </div>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-md-12">
                                        <div class="form-group">
                                            <label for="notes">备注</label>
                                            <textarea class="form-control" id="notes" name="notes" rows="2"></textarea>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 打印页标题 -->
    <div class="print-only" style="display:none; text-align:center; margin-bottom:20px;">
        <h4>项目详情报表</h4>
        <p id="printDate"></p>
    </div>

    <!-- JavaScript 依赖 -->
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.min.js"></script>
    <script>
        // 获取URL参数
        function getUrlParam(param) {
            const urlParams = new URLSearchParams(window.location.search);
            return urlParams.get(param);
        }

        // 页面加载时执行
        document.addEventListener('DOMContentLoaded', function() {
            const mode = getUrlParam('mode');
            const projectId = getUrlParam('id');
            const isAdd = mode === 'add';
            const isEdit = mode === 'edit';
            const isView = mode === 'view';
            
            // 设置页面标题
            if (isAdd) {
                document.getElementById('pageTitle').textContent = '新增项目';
                document.title = '新增项目';
                document.getElementById('editModeButtons').style.display = 'block';
                document.getElementById('viewModeButtons').style.display = 'none';
            } else if (isEdit) {
                document.getElementById('pageTitle').textContent = '编辑项目';
                document.title = '编辑项目';
                document.getElementById('editModeButtons').style.display = 'block';
                document.getElementById('viewModeButtons').style.display = 'none';
                loadProjectData(projectId);
            } else {
                document.getElementById('pageTitle').textContent = '项目详情';
                document.title = '项目详情';
                document.getElementById('viewModeButtons').style.display = 'block';
                document.getElementById('editModeButtons').style.display = 'none';
                loadProjectData(projectId);
                // 设置表单为只读
                setFormReadOnly(true);
            }
            
            // 返回按钮事件
            document.getElementById('backBtn').addEventListener('click', function() {
                window.location.href = '../project-management.html';
            });
            
            // 取消按钮事件
            document.getElementById('cancelBtn').addEventListener('click', function() {
                window.location.href = '../project-management.html';
            });
            
            // 保存按钮事件
            document.getElementById('saveBtn').addEventListener('click', function() {
                // 保存项目数据
                alert('项目保存成功');
                window.location.href = '../project-management.html';
            });
            
            // 打印按钮事件
            document.getElementById('printBtn').addEventListener('click', function() {
                document.getElementById('printDate').textContent = '打印日期：' + new Date().toLocaleDateString();
                window.print();
            });
        });
        
        // 设置表单为只读
        function setFormReadOnly(readOnly) {
            const formElements = document.getElementById('projectForm').elements;
            for (let i = 0; i < formElements.length; i++) {
                if (formElements[i].id !== 'projectId') { // 项目编号始终为只读
                    formElements[i].readOnly = readOnly;
                    if (formElements[i].tagName === 'SELECT') {
                        formElements[i].disabled = readOnly;
                    }
                }
            }
        }
        
        // 加载项目数据
        function loadProjectData(projectId) {
            // 模拟从服务器获取数据
            // 在实际应用中，这里应该是一个AJAX请求
            const projectData = getProjectData(projectId);
            
            if (projectData) {
                // 填充表单数据
                document.getElementById('projectName').value = projectData.name;
                document.getElementById('projectId').value = projectData.id;
                document.getElementById('department').value = projectData.department;
                document.getElementById('status').value = projectData.status;
                document.getElementById('manager').value = projectData.manager;
                document.getElementById('createTime').value = projectData.createTime;
                document.getElementById('budget').value = projectData.budget;
                document.getElementById('bidPrice').value = projectData.bidPrice;
                document.getElementById('bidTime').value = projectData.bidTime;
                document.getElementById('description').value = projectData.description;
                document.getElementById('startTime').value = projectData.startTime;
                document.getElementById('endTime').value = projectData.endTime;
                document.getElementById('vendor').value = projectData.vendor;
                document.getElementById('contact').value = projectData.contact;
                document.getElementById('notes').value = projectData.notes;
            }
        }
        
        // 模拟获取项目数据的函数
        function getProjectData(projectId) {
            // 实际项目中，这里应该从服务器获取数据
            const demoData = {
                'PRJ2023001': {
                    id: 'PRJ2023001',
                    name: 'OA系统升级项目',
                    department: '信息技术部',
                    status: '在建项目',
                    manager: '张三',
                    createTime: '2023-01-15',
                    budget: '120.00',
                    bidPrice: '105.80',
                    bidTime: '2023-02-20',
                    description: 'OA系统升级项目，包括工作流优化、移动端适配等功能。',
                    startTime: '2023-03-01',
                    endTime: '2023-08-31',
                    vendor: '某软件科技有限公司',
                    contact: '李经理 13800138000',
                    notes: '本项目为重点项目，需按时保质完成'
                },
                'PRJ2023002': {
                    id: 'PRJ2023002',
                    name: '数据中心建设',
                    department: '信息技术部',
                    status: '申报中',
                    manager: '李四',
                    createTime: '2023-02-10',
                    budget: '500.00',
                    bidPrice: '',
                    bidTime: '',
                    description: '数据中心建设项目，包括机房建设、网络设备采购等。',
                    startTime: '2023-04-01',
                    endTime: '2023-12-31',
                    vendor: '',
                    contact: '',
                    notes: '正在申报中，预计3月底前完成审批'
                },
                'PRJ2023003': {
                    id: 'PRJ2023003',
                    name: '人力资源管理系统',
                    department: '人力资源部',
                    status: '已申报',
                    manager: '王五',
                    createTime: '2023-03-05',
                    budget: '80.00',
                    bidPrice: '',
                    bidTime: '',
                    description: '人力资源管理系统开发，包括考勤、绩效、薪酬等模块。',
                    startTime: '2023-05-01',
                    endTime: '2023-09-30',
                    vendor: '',
                    contact: '',
                    notes: '已完成申报，等待招标'
                },
                'PRJ2022010': {
                    id: 'PRJ2022010',
                    name: '财务系统更新',
                    department: '财务部',
                    status: '已结项',
                    manager: '赵六',
                    createTime: '2022-10-15',
                    budget: '150.00',
                    bidPrice: '142.50',
                    bidTime: '2022-11-10',
                    description: '财务系统更新项目，包括财务报表、税务处理等功能优化。',
                    startTime: '2022-12-01',
                    endTime: '2023-03-31',
                    vendor: '财智软件有限公司',
                    contact: '张总 13900139000',
                    notes: '项目已于2023年3月31日完成验收'
                },
                'PRJ2023004': {
                    id: 'PRJ2023004',
                    name: '安防监控系统',
                    department: '安全部',
                    status: '在建项目',
                    manager: '孙七',
                    createTime: '2023-04-20',
                    budget: '60.00',
                    bidPrice: '58.50',
                    bidTime: '2023-05-15',
                    description: '安防监控系统升级，包括摄像头更新、监控中心建设等。',
                    startTime: '2023-06-01',
                    endTime: '2023-09-30',
                    vendor: '安视科技有限公司',
                    contact: '王工 13700137000',
                    notes: '项目进度正常，已完成设备采购'
                }
            };
            
            return demoData[projectId];
        }
    </script>
</body>
</html>
